<template>
  <div>
    <Header_h />
    <article class="core_content">
      <div class="containers">
        <div class="new_banner" @click="webUrl(banner[0].href)">
          <img v-if="banner[0]" :src="banner[0].tpic" alt="" />
        </div>
        <div class="searchs_eng s_flex s_justify_content s_align_items">
          <el-select
            v-model="typeValue"
            clearable
            @clear="clear"
            @change="HandeType"
            placeholder="专利申请及诉讼应对"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="CountryValue"
            clearable
            @clear="clear"
            @change="HandeCountry"
            placeholder="国家"
          >
            <el-option
              v-for="item in CountryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <section class="s_flex s_justify_content s_flex-wrap">
          <div
            class="flex-item"
            v-for="item in list.list"
            :key="item.id"
            @click="goProtection(item.id)"
          >
            <img :src="`../../../../public/${item.country}.jpg`" alt="" />
            <div>
              <p>
                <span class="title_color">{{ item.type_name }}</span>
              </p>
              <p>
                <span class="title_color">{{ item.country_name }}</span>
              </p>
              <p class="text_r">
                <span class="sq_see"
                  ><router-link to="#">立即查看</router-link></span
                >
              </p>
            </div>
          </div>
        </section>
      </div>
    </article>
    <Footer />
    <navItem />
    <rightMenu @moveTo="moveTo" />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import rightMenu from "@/components/web/rightMenu";
import { WebGetType, WebGetCountry } from "@/api/admin";
import { lawLsit, bannerList } from "@/api/web";

export default {
  components: {
    Header_h,
    Footer,

    rightMenu,
  },
  data() {
    return {
      CountryValue: "",
      typeOptions: [],
      CountryOptions: [],
      typeValue: "",
      list: [],
      banner: [],
    };
  },
  mounted() {
    this.getList();
    this.getdata();
    this.getBanner();
  },
  methods: {
    moveTo() {
      window.scrollTo(0, 0);
    },
    async getBanner() {
      try {
        this.banner = await bannerList({ from: 4 });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getdata() {
      try {
        this.list = await lawLsit({
          type: this.typeValue,
          country: this.CountryValue,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getList() {
      try {
        this.typeOptions = await WebGetType();
        this.CountryOptions = await WebGetCountry();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    HandeType() {
      this.getdata();
    },
    HandeCountry() {
      this.getdata();
    },
    handleIconClick() {},
    clear() {
      this.getdata();
    },
    goProtection(id) {
      this.$router.push({ path: "/web/protection/details", query: { id: id } });
    },
    webUrl(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="less" scoped>
/* core_content */
.core_content {
  background: #f7fbfe;
  padding: 40px 0;
}

.core_content .item_list_img {
  width: 224px;
  height: 127px;
  object-fit: cover;
  margin-right: 25px;
}

.core_content .item_list {
  border-bottom: 1px solid #eee;
  padding: 25px 0;
}

.core_content .content_spacing {
  margin: 17px auto 30px;
}
.core_content_left {
  width: 70%;
  background-color: #fff;
  margin: 10px 0;
  // position: absolute;
  // top: 0;
  // left: 0;
}
.core_content_right {
  width: 25%;
  background-color: #fff;
  // position: absolute;
  // top:0;
  // right: 0;
  // margin:10px 0;
}
.item_right_img {
  width: 281px;
  height: 181px;
  object-fit: cover;
}
.content_right_spacing {
  margin: 10px 0;
}
.list_right {
  border-top: 1px solid #eee;
  padding: 10px 0;
  margin: 0 10px;
}
.right_title {
  margin: 0 10px;
  padding: 10px 0;
}
/* core_content */

.flex-item {
  width: 29%;
  margin-top: 50px;
  background-color: #fff;
  padding: 10px;
}

.flex-item p {
  margin-top: 10px;
}
.flex-item p:last-child {
  margin-top: 20px;
}

.flex-item img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.flex-item .sq_success,
.flex-item .sq_end {
  margin-right: 20px;
}

.name {
  font-size: 20px;
}
.line {
  height: 75px;
}
.searchs_eng {
  width: 450px;
  margin-top: 50px;
}
.text_r {
  text-align: right;
}

@media (max-width: 750px) {
  .flex-item {
    width: 100%;
    margin-top: 25px;
    background-color: #fff;
    padding: 10px;
  }
  .searchs_eng {
    width: 100%;
    margin-top: 25px;
  }
}
</style>